// 导入React的useRef Hook
import { useRef } from "react";
// 导入@react-three/drei提供的useGLTF Hook，用于加载和管理3D模型
import { useGLTF } from "@react-three/drei";
// 导入@react-three/fiber提供的useFrame Hook，用于处理每帧渲染时的更新逻辑
import { useFrame } from "@react-three/fiber";

// 导入预先准备好的天空球场景资源
import skyScene from "../assets/3d/sky.glb";


// 定义Sky组件，接收一个布尔属性`isRotating`以决定天空背景是否旋转
export function Sky({ isRotating }) {
  // 使用useGLTF Hook加载预设的天空球场景模型
  const sky = useGLTF(skyScene);
  // 创建一个React ref对象用于引用Three.js中的mesh实例
  const skyRef = useRef();

  // 在每一帧渲染时执行回调函数，根据`isRotating`状态调整天空背景的旋转角度
  useFrame((_, delta) => {
    if (isRotating) {
      // 根据时间差（delta）动态调整天空背景沿y轴的旋转速度
      skyRef.current.rotation.y += 0.25 * delta;
      // 如果需要改变旋转速度，可调整上述系数0.25
    }
  });

  // 返回一个包含三维网格组件<mesh>，并将其ref绑定到天空背景实例上
  return (
    <mesh ref={skyRef}>
      {/* 当直接嵌入复杂3D模型或场景时，使用<primitive>元素 */}
      {/* 对于此处的天空球场景模型 */}
      <primitive object={sky.scene} />
    </mesh>
  );
}